// Officehall
import React from 'react' ;
import { Row, Col, Input } from 'antd' ;
import './Officehall.scss'
import office_hall_banner_event from '../../static/Officehall/office_hall_banner_event.jpg' ;
import office_hall_banner_personal from '../../static/Officehall/office_hall_banner_personal.jpg' ;
import office_hall_banner_policy from '../../static/Officehall/office_hall_banner_policy.jpg' ;
const Search = Input.Search
let news_pic_arr = [{
    text: '单位办事',
    img: office_hall_banner_event
}, {
    text: '个人办事',
    img: office_hall_banner_personal
}, {
    text: '政策法权',
    img: office_hall_banner_policy
}]
class Officehall extends React.Component{
    constructor(props){
        super(props) ;
        this.state = {
            home_news : office_hall_banner_event ,
            active: 0
        }
    }
    homeNewsChange = (index, value) => {
        console.log(value)
        this.setState({
            home_news : value,
            active: index
        })
    }
    turn2Page(e){
        this.props.history.push(e) ;
    }
    render(){
        const { active, home_news } = this.state
        return (
            <div className={'officeHallBox'}>
                <div className='top'></div>
                <div className='main'>
                    <div className='searchBox'>
                        <Search placeholder="请输入关键字" enterButton="搜索" size="large" />
                    </div>
                    <div className='banner'></div>
                    <nav className='nav'>
                    <Row gutter={24}>
                        <Col span={24}>
                            {
                                news_pic_arr.map((item, index) => {
                                    return (
                                        <a key={index} onClick={this.homeNewsChange.bind(null, index, item.img)} className={active === index ? 'activeClassLink' : null}>{item.text}</a>
                                    )
                                })
                            }
                        </Col>
                    </Row>
                    </nav>
                    <img src={home_news} onClick={this.turn2Page.bind(this,"/CompanyService")} alt="等待加载"/>
                </div>
            </div> 
        )
    }
}

export default Officehall ;